import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton, AtInput } from 'taro-ui'
import { DNavBar, DAtInpute } from '@/components'
import http from '@/api'
import './index.scss'

export default class EnterpriseCert extends Component {
  state = {
    title: '企业认证',
    enterpriseName: '', // 企业名称
    isAuth: false, // 是否已经认证
    manageName: '', // 管理员名称
    entId: '', // 企业Id
    rep: false,
    entList: '',
    isSearch: false, // 搜索结果是否返回
  }

  changeEnterpriseName(newVal) {
    if (newVal == '') {
      this.setState({
        entList: '',
        isSearch: false,
        enterpriseName: newVal,
      })
      // 为空时清除定时器，否则会导致删除时发送请求会带上最后一个字符
      clearTimeout(this.debounce.timer)
      return
    }

    this.debounce(this.getEntList({ entName: newVal }), 300)
    this.setState({
      enterpriseName: newVal
    })
  }

  // 防抖
  debounce = (fn, delay) => {
    if (this.debounce.timer) {
      clearTimeout(this.debounce.timer)
    }
    this.debounce.timer = setTimeout(fn, delay)
  }

  getEntList(params) {
    return async () => {
      let res = await http.getEnterpriseList(params)

      this.setState({
        entList: res.list,
        isSearch: true
      })
    }
  }

  async nextStep() {
    const { enterpriseName } = this.state
    if (!enterpriseName) {
      Taro.showToast({
        title: '企业名称不能为空',
        icon: 'none'
      })
      return
    }
    let { manageName, isExist, entId, eaIsAppro } = await await http.searchByEntName({ entName: enterpriseName })

    if (isExist) { // 企业名称已存在
      // 判断是否认证
      if (eaIsAppro == 0) {
        // 审核中
        Taro.showToast({
          title: `【${enterpriseName}】已提交认证，待平台运营人员审核，请耐心等待。`,
          icon: 'none'
        })
      } else if (eaIsAppro == 1) {
        // 审核通过
        this.setState({
          isAuth: true,
          manageName,
          entId
        })
      } else {
        // 未认证
        Taro.navigateTo({
          url: `/pages/enterpriseform/enterpriseform?entName=${enterpriseName}`
        })
      }
    } else {
      Taro.navigateTo({
        url: '/pages/enterpriseform/enterpriseform?entName=' + enterpriseName
      })
    }
  }

  handleApply = async () => {
    const { entId } = this.state

    await http.ApproEmployee({ entId })
    Taro.redirectTo({
      url: '/pages/myinfo/auditInfo'
    })
  }

  changeOption(value) {
    clearTimeout(this.debounce.timer)
    this.setState({
      enterpriseName: value,
      entList: '',
    })
  }

  render() {
    const { title, enterpriseName, isAuth, manageName, entList, isSearch } = this.state

    return (
      <View className="enterprise_cert">
        <DNavBar title={title}></DNavBar>

        <div className="container">
          {/* 输入企业名称 */}
          {
            !isAuth && <View>
              <DAtInpute icon="none" title="企业名称" require></DAtInpute>
              <AtInput placeholder="请输入您的企业营业执照上企业名称" value={enterpriseName} onChange={this.changeEnterpriseName.bind(this)}></AtInput>
              {
                entList && entList.map((item) => <View className="options">
                  <View className="option_item" onClick={this.changeOption.bind(this, item.entName)}>{item.entName}</View>
                </View>)
              }
              <View className="btn">
                <AtButton className={['next', isSearch ? 'active' : ''].join(' ')} onClick={this.nextStep.bind(this)}>下一步</AtButton>
              </View>
            </View>
          }

          {/* 企业已认证 */}
          {
            isAuth && <View>
              <View className="top">【{enterpriseName}】已存在</View>
              <View className="border"></View>
              <View className="content">
                <View className="content_header">您可以通过以下下方式加入企业：</View>
                <View className="content_con">
                  <View className="content_con_item title">企业管理员审批</View>
                  <View className="content_con_item">发送加入申请给企业管理员，审批通过后即可加入企业。</View>
                  <View className="content_con_item">企业管理员：{manageName}</View>
                </View>
              </View>

              <AtButton onClick={this.handleApply}>立即申请</AtButton>
            </View>
          }

        </div>
      </View>
    )
  }
}
